<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  created() {
    // console.log(this.$socket.io.open(({ autoConnect: true }) => {}));
  },
  mounted() {
    // console.log(this.$socket.open());
    this.$socket.connect();
    // this.$socket.emit("hello", "这里是mounted端");
    this.sockets.subscribe("welcome", (data) => {
      this.$socket.emit("hello", "这里是客户端");
    });
  },
  beforeDestroy() {
    this.sockets.unsubscribe("welcome");
    this.$socket.close();
  },
  sockets: {
    disconnect() {
      console.log("Socket 断开");
    },
    connect_failed() {
      console.log("连接失败");
    },
    connect() {
      console.log("socket connected");
    },
  },
};
</script>
